﻿@model Yunwei.Web.Models.RestaurantViewModel
@{
    ViewBag.Title = "Detail";
}


<link href="~/Content/animate.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/restaurant.css" rel="stylesheet" type="text/css" />
<link href="~/Content/sb-admin-2.css" rel="stylesheet" type="text/css">
<link href="~/Content/font-awesome.min.css" rel="stylesheet" type="text/css">


<div class="d-scroll-top-box hidden-print hidden-xs hidden-sm affix-top" style="display: none" aria-hidden="true"><span class="glyphicon glyphicon-arrow-up d-scroll-top-button"></span></div>

<div class="container main">
    <div class="row home-contents">
        <div class="col-md-8 col-sm-8">
            <!-- HEADING AND BUTTONS -->
            <div class="intro-section">
                <!-- WELCOM MESSAGE -->
                <h1 class="intro"><span style="color:#1CB3A8;">@Model.Restaurant.Name</span></h1>
                <h5>@Html.Raw(Model.Restaurant.Description)</h5>
                <!-- BUTTON -->
                <div class="buttons wow fadeInRight animated stores" data-wow-offset="10" data-wow-duration="1.5s">
                    <a href="#" class="btn btn-info btn-circle" title="关注"><i class="fa fa-heart"></i></a>
                    <a href="#" class="btn btn-info btn-circle" title="文章列表"><i class="fa fa-list"></i></a>
                    <a href="#" class="btn btn-info btn-circle" title="分享到新浪微博"><i class="fa fa-weibo"></i></a>
                    <a href="#" class="btn btn-info btn-circle" title="分享到腾讯微博"><i class="fa fa-tencent-weibo"></i></a>
                    <a href="#" class="btn btn-info btn-circle" title="分享到微信朋友圈"><i class="fa fa-weixin"></i></a>
                    <a href="#" class="btn btn-info btn-circle" title="分享到到QQ"><i class="fa fa-qq"></i></a>
                    <a href="#" class="btn btn-info btn-circle" title="分享到人人网"><i class="fa fa-renren"></i></a>
                </div>
                <!-- /END BUTTONS -->
            </div>
            <!-- /END HEADNING AND BUTTONS -->
        </div>

        <div class="col-md-4 col-sm-4 hidden-xs">
            <!-- PHONE IMAGE WILL BE HIDDEN IN TABLET PORTRAIT AND MOBILE-->
            <div class="phone-image">
                <img src="@Model.Restaurant.Avatar" class="img-responsive" alt="" />
            </div>
        </div>
    </div>
    <div class="row">
        @foreach (var food in Model.Foods)
        {
            <div class="col-xs-6 col-md-3 mode">
                <div class="dish-thumbnail">
                    <div class="post-format-content">
                        <div>
                            <a href="javascript:;" class="thumbnail dish-border"><img src="@food.Avatar" alt="@food.Name"></a>
                        </div>
                        <div class="content-wrap hidden" id="wrap_@food.Id">
                            <span class="entry-title">
                                <a href="javascript:;" class="featured-image" rel="bookmark"><span>0</span><br />已加入购物袋</a>
                            </span>
                        </div>
                    </div>
                    <div class="caption">
                        <p class="text-left name">@food.Name</p>
                        <p class="text-left desc">@food.Brief</p>
                    </div>
                    <hr>
                    <span class="cart-icon-d hidden" id="delete_@food.Id">
                        <a href="javascript:;" onclick="quantitySubtract(this, @food.Id)"><img src="/Images/delete.png" onmouseover="mouseOver(this, 'delete')" onmouseout="mouseOut(this, 'delete')"></a>
                    </span>
                    <span class="cart-icon-a">
                        <a href="javascript:;" onclick="addDishes(this, @food.Id)"><img src="/images/add.png" onmouseover="mouseOver(this, 'add')" onmouseout="mouseOut(this, 'add')"></a>
                    </span>
                    <div class="caption">
                        <p class="text-left price">￥@food.Price</p>
                    </div>
                </div>
            </div>
        }
    </div>
</div>
<script type="text/javascript">
    function quantitySubtract(obj, id) {
        //从购物车中删除
        $.ajax({
            url: "/ShoppingCart/Subtract",
            method: "post",
            data: {
                "Food_Id":id
            },
            dataType: "json",
            success: function (resp) {
                if (resp.Success) {
                    var span = $("#wrap_" + id + " span span");
                    if (parseInt(span.text()) == 1) {
                        $("#delete_" + id).addClass("hidden");
                        $("#wrap_" + id).addClass("hidden");
                    }

                    span.text(parseInt(span.text()) - 1);
                    var cart = $("#cart_icon");
                    cart.text(parseInt(cart.text()) - 1);
                }
                else{
                    if (resp.ErrorCode == 222) {
                        window.location.href = "/Admin/User/Login?returnUrl=" + window.location.pathname + window.location.search;
                    }
                    else {
                        console.log("未知错误");
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });
    }

    function addDishes(obj, id) {
        //添加到购物车中
        $.ajax({
            url: "/ShoppingCart/Add",
            method: "post",
            data: {
                "Food_Id":id
            },
            dataType: "json",
            success: function (resp) {
                if (resp.Success) {
                    $("#delete_" + id).removeClass("hidden");
                    $("#wrap_" + id).removeClass("hidden");
                    var span = $("#wrap_" + id + " span span");
                    span.text(parseInt(span.text()) + 1);

                    animate2Cart(obj, "aaaa");
                }
                else{
                    if (resp.ErrorCode == 222) {
                        window.location.href = "/Admin/User/Login?returnUrl=" + window.location.pathname + window.location.search;
                    }
                    else {
                        console.log("未知错误");
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });

    }

    function animate2Cart(obj, name) {
        var d = $(obj);
        var g = $("#cart_icon");

        "none" == $("#cart_icon").css("display") && (g = $("#cart_icon_app"));
        var h = $(window).scrollTop(),
        i = {
            left: d.offset().left,
            top: d.offset().top - h
        },
        j = {
            left: d.offset().left - 100,
            top: d.offset().top - h - 100
        },
        k = {
            left: g.offset().left,
            top: g.offset().top - h
        };

        var cart = $("#cart_icon");
        var f = $('<span class="animate-tip">' + name + "</span>");
        f.appendTo(document.body),
        f.animate(i, function () {
            f.show().animate(j, 300).animate(k, 500, function () {
                f.remove();
                cart.text(parseInt(cart.text()) + 1);
            });
        })

    }
</script>